<template>
  <div>
    <!-- 页面加载自动获取焦点 -->
    <input v-focus type="text" placeholder="请输入内容">
    <div v-color="color">
      今天天气真好!
    </div>
    <button @click="color='skyblue'">修改颜色</button>
  </div>
</template>

<script>
export default {
  name: 'VueDemoApp',
  //自定义指令订单好处：
  //1.避免我们频繁操作dom
  // 2.便于复用
  directives:{
    focus:{
      inserted(el){
        el.focus()
      }
    },
    color:{
      //这些自动执行的函数,还有一个爱称：钩子函数
      //这个元素挂载到页面时自动执行
      //inserted有两个参数:
      //参数1：原生DOM对象
      //参数2：指令有关的所有参数
      inserted(el,binding){
        el.style.color=binding.value
      },
      //这个函数会在指令的值发生变化时自动执行
      //同样提供两个参数
      update(el,{value}){
        el.style.color=value
      }
    }
  },
  data() {
    return {
      color:'yellow'
    };
  },

  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="scss" scoped>

</style>